<!-- 沟通记录页面 -->
<template>
	<view style="width: 100%;overflow: hidden;">
		<!-- 引入公共头部组件 -->
		<HeaderTitle ref="HeaderTitle" title="沟通记录" rightTextColor="#1959F9" :rightContent="'新建'"
			:rangeSearchData="rangeSearchData" @selectRightIconChange="onClickRight" :isBack="true" :isSelect="true"
			:placeholder="placeholder" :inputValue="queryParams.Conditions[0].Keyword"
			:selectValue="queryParams.Conditions[0].condition" @changeSearchSelect="changeSearchSelect"
			@confirm="search" @cancel="cancel" />
		<!-- 内容区域 -->
		<view style="width: 100%;padding-top: 120rpx;">
			<view v-for="item in list" :key="item.Id">
				<u-card :title="item.DailyRecordTitle" :sub-title="subTitle(item.DailyRecordDate)" thumb="">
					<view class="" slot="body">
						<view>
							<span>{{ item.CustomerName}}</span>
							<span class="content" v-html="item.DailyRecord"></span>
							<uni-tag style="letter-spacing: 5px" type="primary" :text="item.SNameList"> </uni-tag>
						</view>
					</view>
					<view class="" slot="foot">
						<view v-if="CreatorId == item.CreatorId" class="submitButtonRecod">
							<u-button size="mini" @click="showClick(item)" type="success"
								style="height: 60rpx;">抄送</u-button>
							<u-button size="mini" @click.stop="edit(item)" type="primary"
								style="height: 60rpx;margin-left: 25rpx;">编辑</u-button>
							<u-button size="mini" @click.stop="deli(item)" plain type="primary"
								style="height: 60rpx;margin-left: 25rpx;"><span style="color:#000">
									查看</span></u-button>
						</view>
						<!-- -->
						<view v-else class="submitButtonRecod">
							<u-button size="mini" @click="deli(item)" plain type="primary" style="height: 60rpx;"><span
									style="color:#000">
									查看</span></u-button>
						</view>
					</view>
				</u-card>
			</view>

			<view style="padding-bottom: 20px;">
				<LoadingMore :status="status" :contentText="contentText" :rows="data"></LoadingMore>
			</view>
		</view>

		<UniPopup ref="UniPopup" @confrim="UniPopupConfrim"></UniPopup>
	</view>
</template>

<script>
	import {
		GetCust_CommunicationList,
		SalesmanDailyRecordUpdateDataByCondition
	} from '@/api/interface.js'
	// 引入顶部navbar组件
	import HeaderTitle from '@/components/header/header-title.vue'
	import UniPopup from "../../components/UniPopup.vue"
	export default {
		components: {
			HeaderTitle,
			UniPopup
		},
		data() {
			return {
				// 顶部搜索狂的placeholder
				placeholder: "请输入关键字",
				data: [],
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '轻轻上拉',
					contentrefresh: '努力加载中...',
					contentnomore: '实在没有了'
				},
				// 搜索类型下拉列表
				// 下拉搜索条件
				rangeSearchData: [{
						value: 'DRKeyWord',
						text: "关键字"
					},
					{
						value: 'DailyRecordTitle',
						text: "标题"
					},
					{
						value: 'DailyRecord',
						text: "沟通内容"
					},
					{
						value: 'CustomerName',
						text: "客户名称"
					},
					// {
					// 	value: 'SharerIds',
					// 	text: "抄送人"
					// },
				],
				pagination: {
					current: 1,
					pageSize: 10,
				},
				CreatorId: "",
				value: "",
				Id: "",
				show: false,
				Total: 0,
				Keyword: "",
				list: [],
				loading: false,
				// 列表传递参数
				queryParams: {
					sDate: "",
					dDate: "",
					Conditions: [{
						condition: "DRKeyWord",
						Keyword: ""
					}]
				},
				// /抄送列表人当前行数据
				SharerIdsRow: {},
				ids: [],
				arr: []
			};
		},
		onShow() {
			// 获取沟通记录列表数据
			this.pagination.current = 1
			this.getDataList();
			// 当前登录用户id赋值
			this.CreatorId = this.$store.state.UserInfo.UserInfo.Id
		},
		//下拉刷新
		onPullDownRefresh() {
			this.pagination.current = 1
			uni.stopPullDownRefresh();
			this.list = [];
			this.getDataList()
		},
		//上拉加载
		onReachBottom() {
			if (this.status == 'noMore') {
				return;
			}
			this.pagination.current++;
			// 获取沟通记录列表数据
			this.getDataList();
		},
		methods: {
			// 搜索下拉选择回调
			changeSearchSelect(event) {
				this.queryParams.Conditions[0].condition = event
				// 处理动态placeholder
				let placeHolderText = this.rangeSearchData.filter(item => item.value === event)[0].text
				this.placeholder = '请输入' + placeHolderText
				console.log('最终回调过来的回调过来----------------------------list', event, this.queryParams.Conditions[0].condition)
			},
			subTitle(value) {
				let time = ""
				if (value) {
					time = this.$moment(value).format("YYYY-MM-DD")
				}
				return time
			},

			// 新建沟通记录
			onClickRight() {
				console.log("新建沟通记录");
				uni.navigateTo({
					url: "/pages/Cust_Communication/AddForm?title=新建沟通记录"
				})
			},
			// 查看沟通记录
			deli(item) {
				uni.navigateTo({
					url: "/pages/Cust_Communication/EditForm?Id=" + item.Id + "&title=查看沟通记录"
				})
			},
			//编辑
			edit(item) {
				uni.navigateTo({
					url: "/pages/Cust_Communication/EditForm?Id=" + item.Id + "&title=修改沟通记录"
				})
			},
			// 抄送人回调
			UniPopupConfrim(list) {
				this.$refs.UniPopup.close()
				let SharerNameArr = list.map(item => ({
					ExecutorId: item.Id,
				}));
				let SharerIds = SharerNameArr.map(item => {
					return item.ExecutorId
				}).join("|");

				this.loading = true
				uni.showLoading({
					title: '抄送中'
				})
				this.$refs.UniPopup.close()
				SalesmanDailyRecordUpdateDataByCondition({
						Conditions: [{
							Condition: "SharerIds",
							Keyword: SharerIds
						}],
						ids: [this.SharerIdsRow.Id]
					})
					.then(res => {
						if (res.Success) {
							this.$sucessToast("已抄送");
							// 更新沟通记录列表
							this.getDataList();
							setTimeout(() => {
								this.loading = false;
								uni.hideLoading()
							}, 2500);

						} else {
							this.$errorToast(res.Msg);
							uni.hideLoading()
							this.loading = false;
						}
					});
			},
			// 抄送
			showClick(item) {
				this.SharerIdsRow = item
				console.log('开始抄送了', item, item.SNameList)
				this.$refs.UniPopup.openForm(item.SNameList)
			},

			//搜索
			search(value) {
				// 页数重置
				this.pagination.current = 1;
				// 列表数据清空
				this.list = [];
				this.queryParams.Conditions[0].Keyword = value
				// 获取沟通记录列表
				this.getDataList();
			},
			cancel() {
				// 清空搜索框的内容初始化。从新调用接口
				this.$refs.HeaderTitle.clearSelectKewords()
				this.queryParams.Conditions[0].Keyword = "";
				this.queryParams.Conditions[0].condition = "DRKeyWord"
				this.placeholder = "请输入关键字"
				console.log('this.queryParamsthis.queryParams', this.queryParams)
				this.search()
			},
			// 获取沟通记录列表
			getDataList() {
				this.status = "loading"
				this.list = []
				GetCust_CommunicationList({
						PageIndex: this.pagination.current,
						PageRows: this.pagination.pageSize,
						SortField: "DailyRecordDate",
						SortType: "desc",
						Search: this.queryParams
					})
					.then(resJson => {
						if (resJson.Success) {
							// 赋值总条数
							this.Total = resJson.Total;
							if (resJson.Data == null) {
								this.status = 'noMore'; // 没有更多数据
								return
							}
							if (this.pagination.current == 1) {
								this.list = resJson.Data;
							} else {
								this.list = this.list.concat(resJson.Data);
							}
							this.list.forEach(item => {
								item.SNameList = item.SharerNameList ?
									item.SharerNameList.join("|") :
									"";
							});
							if (this.list.length >= resJson.Total) {
								this.status = 'noMore'; // 没有更多数据
							} else {
								this.status = 'loading'; // 没有更多数据
							}
						} else {
							this.status = 'noMore'; // 没有更多数据
						}
					});
			}
		},
	};
</script>

<style scoped>
	.u-card {
		margin: 15rpx !important;
	}

	.u-card>>>.u-card__foot {
		padding: 20rpx !important;
		display: flex;
		justify-content: flex-end;
	}

	/* 覆盖van-button的默认样式 */
	.van-button {
		padding: 0 10px 0 10px !important;
	}

	.popup {
		border-radius: 20px 20px 0 0;
	}

	.comBtn {
		border-radius: 2px;
		margin-top: 5px;
	}

	.submitButtonRecod {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.content {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
		overflow: hidden;
	}

	.confirmBtn {
		/* position: fixed;
  top: 50%; */
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 10px;
		line-height: 2;
		background-color: #fff;
		box-sizing: border-box;
		z-index: 100;
		border-radius: 20px 20px 0 0;
	}
</style>